<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" href="https://newsblur.com/media/img/favicon.ico" type="image/png" />
  <link rel="icon" href="https://newsblur.com/media/img/favicon_32.png" sizes="32x32"/>
  <link rel="icon" href="https://newsblur.com/media/img/favicon_64.png" sizes="64x64"/>
  <link rel="alternate" type="application/rss+xml" 
  title="The NewsBlur Blog RSS feed" 
  href="/feed.xml" /><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>Redesigning NewsBlur on the web, iOS, and Android | The NewsBlur Blog</title>
<meta name="generator" content="Jekyll v4.3.4" />
<meta property="og:title" content="Redesigning NewsBlur on the web, iOS, and Android" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="This past year we’ve focused on maintenance and improving quality behind the scenes. It just so happens that the urge to clean is so strong that this work extended to the front-end. After months of work, today we’re launching a redesigned NewsBlur for all three platforms: on the web, on iOS, and on Android. There’s a lot that’s new. And what better day to launch a redesign than on the ninth anniversary of the sunset of Google Reader." />
<meta property="og:description" content="This past year we’ve focused on maintenance and improving quality behind the scenes. It just so happens that the urge to clean is so strong that this work extended to the front-end. After months of work, today we’re launching a redesigned NewsBlur for all three platforms: on the web, on iOS, and on Android. There’s a lot that’s new. And what better day to launch a redesign than on the ninth anniversary of the sunset of Google Reader." />
<link rel="canonical" href="https://blog.newsblur.com/2021/07/01/refreshing-newsblur-design/" />
<meta property="og:url" content="https://blog.newsblur.com/2021/07/01/refreshing-newsblur-design/" />
<meta property="og:site_name" content="The NewsBlur Blog" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2021-07-01T00:00:00-04:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Redesigning NewsBlur on the web, iOS, and Android" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2021-07-01T00:00:00-04:00","datePublished":"2021-07-01T00:00:00-04:00","description":"This past year we’ve focused on maintenance and improving quality behind the scenes. It just so happens that the urge to clean is so strong that this work extended to the front-end. After months of work, today we’re launching a redesigned NewsBlur for all three platforms: on the web, on iOS, and on Android. There’s a lot that’s new. And what better day to launch a redesign than on the ninth anniversary of the sunset of Google Reader.","headline":"Redesigning NewsBlur on the web, iOS, and Android","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.newsblur.com/2021/07/01/refreshing-newsblur-design/"},"publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://blog.newsblur.com/assets/newsblur_logo_512.png"}},"url":"https://blog.newsblur.com/2021/07/01/refreshing-newsblur-design/"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="/assets/main.css">
  <link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6565292/711824/css/fonts.css" />
   <link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6565292/731824/css/fonts.css" /><link type="application/atom+xml" rel="alternate" href="https://blog.newsblur.com/feed.xml" title="The NewsBlur Blog" /></head>
<body><header class="site-header" role="banner">

  <div class="wrapper"><a class="site-title" rel="author" href="/">
      <div class="site-title-image">
        <img src="/assets/newsblur_logo_512.png">
      </div>
      <div class="site-title-text">The NewsBlur Blog</div>
    </a><nav class="site-nav">
        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
        <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
            </svg>
          </span>
        </label>

        <div class="trigger"><a class="page-link" href="https://www.newsblur.com">Visit NewsBlur ➤</a></div>
      </nav></div>
</header>

<header class="site-subheader" role="banner">

  <div class="wrapper">
    <div class="top">
      NewsBlur is a personal news reader that brings people together to talk about the world.
    </div>
    <div class="bottom">
      A new sound of an old instrument.
    </div>
  </div>

</header>
<main class="page-content" aria-label="Content">
      <div class="wrapper">
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">

  <header class="post-header">
    <h1 class="post-title p-name" itemprop="name headline">Redesigning NewsBlur on the web, iOS, and Android</h1>
    <p class="post-meta">
      <time class="dt-published" datetime="2021-07-01T00:00:00-04:00" itemprop="datePublished">Jul 1, 2021
      </time></p>
  </header>

  <div class="post-content e-content" itemprop="articleBody">
    <p>This past year we’ve focused on maintenance and improving quality behind the scenes. It just so happens that the urge to clean is so strong that this work extended to the front-end. After months of work, today we’re launching a redesigned NewsBlur for all three platforms: on the web, on iOS, and on Android. There’s a lot that’s new. And what better day to launch a redesign than on <a href="/2013/03/17/three-months-to-scale-newsblur/">the ninth anniversary of the sunset of Google Reader</a>.</p>

<p>To start, let’s take a look below at the redesigned NewsBlur.</p>

<p><img src="/assets/redesign-web.png" style="width: 750px;" /></p>

<p>Loads of new features:</p>

<ul>
  <li>The dashboard now has multiple, customizable rivers of news</li>
  <li>Image previews are now customizable by size and layout</li>
  <li>Story previews are also customizable by length</li>
  <li>Images are now full bleed on the web (edge-to-edge)</li>
  <li>Controls have been re-styled and made more accessible</li>
  <li>Sizes, spaces, and text have all been tweaked for a more legible read</li>
  <li>Upgraded backend: Python 2 to Python 3, latest Django and libraries, containerized infrastructure</li>
  <li>Both Android and iOS apps have been updated with the new design</li>
</ul>

<p>Those multiple rivers come in handy when you want to follow different interests at a glance. You can of course change which individual feeds or folders is loaded, letting you focus on saved searches, infrequent stories, a single feed, or everything you’re subscribed to.</p>

<p>Below you can see the design in action. Notice how easy it is to change where the image preview is located as well as adjust the number of lines of story text to show.</p>

<p>
    <video autoplay="" loop="" playsinline="" width="500" style="width: 500px;border: 2px solid rgba(0,0,0,0.1)">
        <source src="/assets/redesign-content-preview.mp4" type="video/mp4" />
    </video>
</p>

<p>The reading experience itself has also seen improvement. Full bleed images have been ported over from iOS to both Android and the web. This means that images will now run edge-to-edge. And the controls at the top and bottom of the web app have been restyled to be easier to understand at a quick glance.</p>

<p><img src="/assets/redesign-full-bleed.jpg" style="border: 2px solid rgba(0,0,0,0.1);" /></p>

<p>There’s many ways to adjust story titles to fit. Pack them in dense or offer titles room to breathe.</p>

<p><img src="/assets/redesign-bottom.jpg" style="border: 2px solid rgba(0,0,0,0.1);" /></p>

<p>The redesign has also come to both of the official Android and iOS apps. Right now both are in beta testing, but you can join the <a href="https://testflight.apple.com/join/hYk9WU3f">iOS TestFlight</a> or the <a href="https://play.google.com/store/apps/details?id=com.newsblur&amp;hl=en_US&amp;gl=US">Android beta</a>.</p>

<p><img src="/assets/redesign-ios-android.png" style="" /></p>

<p>This whole redesign weighs in at a whopping 1,316 commits, which <a href="https://github.com/samuelclay/NewsBlur/compare/python2...master">you can view on GitHub</a>. Much of the work that took place here involves upgrading from Python 2 to Python 3 and containerizing everything with Docker. In a few weeks, we’ll post a technical writeup of what those backend changes are and how you can now run a local version of NewsBlur on your own computer with a single line of code. For those that want to run their own private instance of NewsBlur, that line of code is <code class="language-plaintext highlighter-rouge">make nb</code> and <a href="https://github.com/samuelclay/NewsBlur">instructions are found on the repo</a>.</p>

<p>If you’ve enjoyed using NewsBlur and are a fan of this grand redesign, please take a moment to share on social media that you read your news with the help of NewsBlur.</p>

  </div><a class="u-url" href="/2021/07/01/refreshing-newsblur-design/" hidden></a>
</article>

      </div>
    </main><footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="wrapper">

    <h2 class="footer-heading">The NewsBlur Blog</h2>

    <div class="footer-col-wrapper">
      

      <div class="footer-col footer-col-1"><ul class="social-media-list"><li><a href="https://github.com/samuelclay"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#github"></use></svg> <span class="username">samuelclay</span></a></li><li><a href="https://www.twitter.com/newsblur"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#twitter"></use></svg> <span class="username">newsblur</span></a></li><li><a href="mailto:blog@newsblur.com?subject=Hello from the NewsBlur blog"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#email"></use></svg> <span class="username">blog@newsblur.com</span></a></li></ul>
</div>

      <div class="footer-col footer-col-3">
        <p>NewsBlur is a personal news reader that brings people together to talk about the world.<br />
A new sound of an old instrument.<br />
</p>
      </div>
    </div>

  </div>

</footer>
</body>

</html>
